<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-04-10 13:44:29
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-04-25 15:48:32
 * @FilePath: \crm\pagesecharts\index\components2\card5.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="card">
    <view class="title u-flex u-flex-between">
      <view class="u-flex">
        <u--image
          :src="$z.imgsrc('jian5.png')"
          width="36rpx"
          height="36rpx"
        ></u--image>
        <view class="text">线索转化率</view>
      </view>

      <!-- <u-icon name="arrow-right" size="12" color="#999999"></u-icon> -->
    </view>
    <view style="width: 100%; height: 520rpx">
      <l-echart ref="chartRef" @finished="init"></l-echart>
    </view>
  </view>
</template>
<script>
import * as echarts from "@/pagesecharts/lime-echart/static/echarts.min";
import lEchart from "@/pagesecharts/lime-echart/components/l-echart/l-echart.vue";
export default {
  components: {
    lEchart,
  },
  data() {
    return {
      option: {
        grid: {
          bottom: "16%",
        },
        legend: {
          data: ["转化线索", "新增线索"],
        },
        color: ["rgba(57, 193, 137, 1)", "rgba(255, 170, 43, 1)"],
        xAxis: {
          type: "category",
          data: ["3/1", "3/2", "3/3", "3/4", "3/5", "3/6", "3/7"],
          axisLine: {
            lineStyle: {
              color: "#a9a9a9",
              width: 1, //这里是为了突出显示加上的
            },
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#a9a9a9",
            },
          },
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            stack: "a",
            name: "转化线索",
            barWidth: "30%",
            itemStyle: {
              borderRadius: [50, 50, 50, 50],
            },
          },
          {
            data: [60, 46, 64, "-", 50, "-", 100],
            type: "bar",
            stack: "a",
            barWidth: "30%",
            name: "新增线索",
            itemStyle: {
              borderRadius: [50, 50, 50, 50],
            },
          },
        ],
      },
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    async init() {
      const chart = await this.$refs.chartRef.init(echarts);
      chart.setOption(this.option);
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  margin: 14rpx 18rpx;
  background-color: #fff;
  border-radius: 8rpx;

  // padding: 0 24rpx;
  // padding-bottom: 16rpx;
  .title {
    font-size: 28rpx;
    font-weight: bold;
    height: 88rpx;
    padding: 0 24rpx;

    .text {
      padding-left: 12rpx;
      line-height: 1;
    }
  }

  .list {
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
    padding: 0 24rpx;
    padding-bottom: 2rpx;

    .item {
      // width: 210rpx;
      background-color: #f7f8f8;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // align-items: center;
      margin-bottom: 18rpx;
      height: calc(60 * 2rpx);
      border-radius: 8rpx;
      padding: 24rpx 20rpx;

      .text2 {
        color: #838589;
        font-size: 24rpx;
        line-height: 1;
      }

      .text1 {
        color: #171a1d;
        font-size: 28rpx;
        line-height: 1;
        font-weight: bold;
      }
    }
  }
}
</style>
